<template>
  <div>
    <div class="search">
      <el-form id="oneitem" :inline="true" :model="formInline" :label-width="labelWidth||'80px'">
        <el-form-item :label="oneitem" style="margin-bottom:0">
          <el-input v-model="formInline.taskCode" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item v-if="selectShow" :label="twoitem" style="margin-bottom:0">
          <el-select v-model="formInline.statusId" placeholder="请选择">
            <el-option v-for="item in option" :key="item.statusId" :label="item.statusName" :value="item.statusId" clearable />
          </el-select>
        </el-form-item>
        <el-form-item style="margin-bottom:0">
          <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="result">
      <el-row>
        <el-button v-if="addClickShow" id="buttom1" icon="el-icon-circle-plus-outline" @click="onNewClick">新建</el-button>
        <el-button v-if="configClickShow" id="buttom2" @click="configClick">{{ buttonText }}</el-button>
      </el-row>
      <el-table
        ref="searchList"
        :data="searchList"
        style="width: 100%"
        header-row-class-name="header"
        @selection-change="handleSelectionChange"
      >
        <slot name="tableForm" />
      </el-table>
      <div v-if="totalPage>1" class="page">
        <div class="pageShowLeft">
          共{{ totalCount }}条记录 第 {{ pageIndex }}/{{ totalPage }} 页
        </div>
        <div class="pageShowRight">
          <el-pagination
            background
            layout="prev, next"
            :total="totalPage*10"
            prev-text="上一页"
            next-text="下一页"
            @current-change="currentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    oneitem: {
      type: String,
      default: () => ''
    },
    twoitem: {
      type: String,
      default: () => ''
    },
    buttonText: {
      type: String,
      default: () => ''
    },
    option: {
      type: Array,
      default: () => []
    },
    // 列表
    searchList: {
      type: Array,
      default: () => []
    },
    // 当前页
    pageIndex: {
      type: Number,
      default: () => 1
    },
    // 所有数量
    totalCount: {
      type: String,
      default: () => ''
    },
    // 所有页数
    totalPage: {
      type: String,
      default: () => ''
    },
    configClickShow: {
      type: Boolean,
      default: () => false
    },
    addClickShow: {
      type: Boolean,
      default: () => true
    },
    selectShow: {
      type: Boolean,
      default: () => true
    },
    labelWidth: {
      type: String,
      default: () => ''
    }
  },
  data() {
    return {
      formInline: {
        taskCode: '',
        statusId: ''
      }

    }
  },
  methods: {
    onSubmit() {
      this.$emit('searchResultFn', this.formInline)
    },
    currentChange(page) {
      this.$emit('changeList', page)
    },
    onNewClick() {
      this.$emit('newCreateFn')
    },
    configClick() {
      this.$emit('configCilck')
    },
    handleSelectionChange(val) {
      this.$emit('handleSelectionChange', val, this.$refs.searchList)
    }
  }
}
</script>

<style lang="scss" scoped>
#oneitem{
  // .el-select{
  //   width: 210px;
  // }
.el-form-item .el-input{
  width: 210px;
  // .el-input--suffix{
  // width: 210px;

  // }
}
}
  .search {
    display: flex;
    height: 64px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 20px;
    padding-left: 17px;
    background-color: #fff;
  }

  .result {
    padding: 20px 15px 19px 17px;
    background-color: #fff;
  }

// @import '@/styles/element-ui.scss';

#buttom1 {
  align-items: center;
  width: 80px !important;
  height: 36px;
  padding: 0;
  background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
  color: #fff;
  border: none;
}

#buttom2 {
  align-items: center;
  width: 80px !important;
  height: 36px;
  padding: 0;
  background-color: #fbf4f0 !important;
  border: none;
  color: #655b56 !important;
}

.demo-form-inline {
  display: flex;
  align-items: center;
}

.page {
  display: flex;
  justify-content: space-between;
  background: #fff;
  padding: 32px 16px;

  .pageShowLeft {
    line-height: 28px;
    height: 28px;
    font-size: 16px;
    color: #dbdfe5;
  }
}
</style>
